<template>
  <div class="page-container">
    <div class="login-container">
      <el-card class="login-box">
        <div class="login-header">
          <h1 class="logo-text">DOSS直聘</h1>
          <p class="sub-title">找工作，上DOSS直聘</p>
        </div>
        <el-form class="login-form" :model="formData" :rules="rules" ref="loginForm">
          <el-form-item prop="account">
            <el-input
              v-model="formData.account"
              placeholder="请输入手机号"
              :prefix-icon="User"
              size="large"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              size="large"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-button" @click="handleLogin" size="large">
              登录
            </el-button>
          </el-form-item>
          <div class="login-options">
            <el-link type="info" :underline="false">手机验证码登录</el-link>
            <el-link type="info" :underline="false">忘记密码？</el-link>
          </div>
          <div class="register-hint">
            还没有账号？
            <el-link type="primary" :underline="false" @click="toRegister">立即注册</el-link>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import loginApi from '@/api/loginApi'
import md5 from 'js-md5'
import microApp from '@micro-zoe/micro-app'

const router = useRouter()
const loginForm = ref(null)

const formData = reactive({
  account: '13277081267',
  password: 'a123456'
})

const validateAccount = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入手机号'))
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}

const rules = {
  account: [
    { required: true, trigger: 'blur', validator: validateAccount }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  let params = formData
  params.password = md5(params.password)
  loginApi.accountLogin(params).then(res => {
    console.log(res)
    if (res.success) {
      ElMessage.success('登录成功')
      microApp.setGlobalData({
        token: res.date
      })
      router.push('/child/childHome')
    } else {
      ElMessage.error('登录失败')
    }
  })
  if (!loginForm.value) return
  
  // try {
  //   await loginForm.value.validate()
  //   // TODO: 实现登录逻辑
  //   ElMessage.success('登录成功')
  //   router.push('/child/childHome')
  // } catch (error) {
  //   console.log('表单验证失败')
  // }
}

const toRegister = () => {
  // TODO: 实现注册跳转
}
</script>

<style scoped>
.page-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #f6f6f8;
}

.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0; /* 为头部和底部留出空间 */
}

.login-box {
  width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-text {
  font-size: 32px;
  color: var(--el-color-primary);
  margin: 0;
  font-weight: bold;
}

.sub-title {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-top: 8px;
}

.login-form {
  margin-top: 20px;
}

.login-button {
  width: 100%;
}

.login-options {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}

.register-hint {
  text-align: center;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-top: 16px;
}
</style>
